<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>视频分类</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="${pageContext.request.contextPath}/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
</head>
  <body>
  <jsp:include page="header.jsp"></jsp:include>
    <jsp:include page="menu.jsp"></jsp:include>
        
        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="show-top-grids">
				<div class="col-sm-10 show-grid-left main-grids">
					<div class="recommended">
						<div class="recommended-grids english-grid">
							<div class="recommended-info">
								<div class="heading">
									<h3>${category.name }</h3>
								</div>
								<div class="heading-right">
								</div>
								<div class="clearfix"> </div>
							</div>
							<c:forEach items="${categoryList}" var="PE">
								<div class="col-md-3 resent-grid recommended-grid">
									<div class="resent-grid-img recommended-grid-img">
										<a href="${pageContext.request.contextPath}/video/to_play_video/${PE.id}"><img
											src="${pageContext.request.contextPath}/${PE.thumbnailUrl}"
											alt="" /></a>
										<div class="time small-time slider-time">
											<p>
												<fmt:formatDate value="${PE.duration }" pattern="HH:mm:ss"/>
											</p>
										</div>
										<div class="clck small-clck">
											<span class="glyphicon glyphicon-time duration_class" aria-hidden="true"></span>
										</div>
									</div>
									<div
										class="resent-grid-info recommended-grid-info video-info-grid">
										<h5>
											<a href="${pageContext.request.contextPath}/video/to_play_video/${PE.id}" class="title">${PE.name}</a>
										</h5>
										<ul>
											<li><p class="author author-info">
													<a href="#" class="author">${PE.user.nickname }</a>
												</p></li>
											<li class="right-list"><p class="views views-info">${PE.videoClick }</p></li>
										</ul>
									</div>
								</div>
							</c:forEach>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			
			<jsp:include page="footer.jsp"></jsp:include>
			
		</div>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  </body>
</html>